<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <!-- 样式和布局：设计 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>

  <div id="app">
    <el-container direction="vertical">
      <!-- 主体 -->
      <el-main height="">
        <!-- 按钮 elb -->
        <el-button type="primary" size="default" @click="open = true">新建自由行线路</el-button>

        <!-- 对话框 添加 -->
        <el-dialog title="录入新的自由行线路" :visible.sync="open" @close="">
          <!-- 表单，输入框 elf -->
          <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
            <!-- 输入框 -->
            <el-form-item label="项目名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <!-- 输入框 -->
            <el-form-item label="项目代号">
              <el-input v-model="form.code"></el-input>
            </el-form-item>
            <!-- 输入框 -->
            <!-- <el-form-item label="性别">
              <el-input v-model="form.sex"></el-input>
            </el-form-item> -->
            <!-- 输入框 -->
            <!-- <el-form-item label="年龄范围">
              <el-input v-model="form.age"></el-input>
            </el-form-item> -->
            <!-- 输入框 -->
            <el-form-item label="类型">
              <el-input v-model="form.type"></el-input>
            </el-form-item>
            <!-- 输入框 -->
            <el-form-item label="价格">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
            <!-- 输入框 -->
            <el-form-item label="描述">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer">
            <el-button @click="open = false">取消</el-button>
            <el-button type="primary" @click="add()">录入</el-button>
          </span>
        </el-dialog>
        <!-- 对话框 编辑 -->
        <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%" @close="">
          <!-- 表单，输入框 elf -->
          <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
            <!-- 输入框 -->
            <el-form-item label="项目名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <!-- 输入框 -->
            <el-form-item label="项目代号">
              <el-input v-model="form.code"></el-input>
            </el-form-item>
            <!-- 输入框 -->
            <!-- <el-form-item label="性别">
              <el-input v-model="form.sex"></el-input>
            </el-form-item> -->
            <!-- 输入框 -->
            <!-- <el-form-item label="年龄范围">
              <el-input v-model="form.age"></el-input>
            </el-form-item> -->
            <!-- 输入框 -->
            <el-form-item label="类型">
              <el-input v-model="form.type"></el-input>
            </el-form-item>
            <!-- 输入框 -->
            <el-form-item label="价格">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
            <!-- 输入框 -->
            <el-form-item label="描述">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="edit(id)">修 改</el-button>
          </span>
        </el-dialog>

        <!-- 表格: elt -->
        <el-table :data="tbData" border stripe>
          <!-- 循环创建 -->
          <el-table-column v-for="col in tbCols" :prop="col.id" :key="col.id" :label="col.label">
          </el-table-column>
          <!-- 静态 -->
          <el-table-column label="操作">
            <!-- 插槽 -->
            <template slot-scope="scope">
              <el-button type="success" size="mini" @click.lazy="edit(scope.row.id),dialogVisible = true">编辑</el-button>
              <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 elp -->
        <el-pagination @current-change="currentChange" @prev-click="prev()" @next-click="next()"
          :current-page.sync="current" layout="total, prev, pager, next, jumper" :total="total"
          :page-size.sync="pageSize" background>
        </el-pagination>
      </el-main>
      <!-- 页脚 -->
      <!-- <el-footer height="">
        Footer content
      </el-footer> -->
    </el-container>


  </div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript：定义组件 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- axios 网络通信库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        //分页
        pageSize: 5,
        current: 1,
        total: 0,
        // item: {
        //   name: '',
        //   code: '',
        //   price: 0,
        //   type: '',
        //   age: '',
        //   remark: ''
        // },

        form: {
          // id: '',
          name: '',
          code: '',
          // sex: '',
          // age: '',
          type: '',
          price: 0,
          remark: ''
        },
        // 表格的列及绑定的字段（由数据确定）
        tbCols: [
          { id: 'id', label: '编号' },
          { id: 'name', label: '项目名' },
          { id: 'code', label: '代码' },
          // { id: 'sex', label: '性别' },
          // { id: 'age', label: '年龄区间' },
          { id: 'type', label: '类型' },
          { id: 'price', label: '价格' },
          { id: 'remark', label: '描述' },
        ],
        tbData: [],
        open: false,
        dialogVisible: false,
      }
    },
    methods: {
      // 分页器
      currentChange: function () {
        console.log(`当前 ${this.current}`);

        // GET /api/item?p=1&s=20
        // s = pageSize 页面的大小，一页多少条数据
        // p = current 当前位置，1，2，3，4
        let url = 'http://47.109.43.54:9000/api/item';
        axios.get(url, {
          params: {
            p: this.current,
            s: this.pageSize
          }
        })
          .then(res => {
            console.log(res);
            this.tbData = res.data.page;
            this.total = res.data.total;
          })
      },
      next: function () {
        this.current++;
      },
      prev: function () {
        this.current--;
      },
      // 加载
      load: function () {
        let url = 'http://47.109.43.54:9000/api/item';
        axios.get(url)
          .then(res => {
            // console.log(res)
            this.tbData = res.data.page;
            this.total = res.data.total;
          })
          .catch(err => {
            console.error(err);
          })
      },
      // 添加
      add: function () {
        // 关闭对话框
        this.open = false;
        // POST url
        let url = 'http://47.109.43.54:9000/api/item';
        axios.post(url, this.form)
          .then(res => {
            // console.log(res)
            // 成功则加载数据
            this.load();
            this.form.name = '',
              this.form.code = '',
              this.form.type = '',
              this.form.price = '',
              this.form.remark = ''
          })
          .catch(err => {
            console.error(err);
          })
      },
      // 编辑
      edit: function (id) {
        console.log(id);

        this.dialogVisible = false
        let url = `http://47.109.43.54:9000/api/item/${id}`;
        axios.put(url, this.form)
          .then(res => {
            console.log(res)
            // 重新加载
            // this.form.name = '',
            //   this.form.code = '',
            //   this.form.type = '',
            //   this.form.price = '',
            //   this.form.remark = ''
            this.load();
          })
          .catch(err => {
            console.error(err);
          })
      },
      // 删除
      del: function (id) {
        let url = `http://47.109.43.54:9000/api/item/${id}`;

        // DELETE url
        axios.delete(url)
          .then(res => {
            console.log(res)
            // 重新加载
            this.load();
          })
          .catch(err => {
            console.error(err);
          })
      }
    },
    created() {
      // vue 的回调（钩子/hook）函数
      // 调用加载函数，从服务器获得数据
      this.load();
    },
  })
</script>

</html>